<template>
  <div class="wrap">

    <dialog-label class="text-14">
      {{$t('message.InterferenceCheckDlg.dlgTextToBeCheckedIns')}}
    </dialog-label>
    <div class="d-flex align-items-center">
      <query-list
        v-model="params.instances"
        :description="$t('message.InterferenceCheckDlg.dlgTextToBeCheckedIns')"
        :active="params.queryListActiveMap.instances"
        :colorBar="!params.hideNonInterferingPart"
        @removeItem="removeHighlight"
        :tipMsg="$t('message.InterferenceCheckDlg.dlgTipSelectMoreTwoIns')">
      </query-list>
    </div>
    <dialog-label class="text-14">
      {{$t('message.InterferenceCheckDlg.resultList')}}
    </dialog-label>
    <div id="interList"
         :class="['dialog-query-list', params.resultList.length === 0 ? 'list-warn' : 'list-normal']">
      <div class="query-description" v-if="params.resultList.length === 0">
        {{$t(currentStatusTip)}}
      </div>
      <ul class="result-list text-color1">
        <li :key="item.instanceId"
            v-for="item in params.resultList"
            @click="selectResultItem(item)">
          <div :class="['result-item', item.selected ? 'selected-query-li' : '']">
            <i :class="`angle-icon fa fa-angle-${item.unfold ? 'down': 'right'}`"
               @click="unfoldResultItem(item)"/>
            <span class="result-item-title text-ellipsis" :title="item.name">{{item.name}}</span>
          </div>
          <div v-if="item.unfold" class="ident" @click.stop>
            <ul class="text-color1">
              <li :key="insItem.instanceId"
                  v-for="insItem in item.instanceInfoList"
                  @pointerover="highlight(insItem)"
                  @pointerdown="selectInstance(insItem)"
                  @pointerleave="removeHighlight(insItem)"
                  :class="['result-item', selItem && selItem.instanceId === insItem.instanceId ? 'selected-query-li' : '']">
                <span class="result-item-title text-ellipsis" :title="insItem.name">{{insItem.name}}</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        :disabled="!isCalculated"
        @click="calculate">
        {{ $t('message.InterferenceCheckDlg.dlgBtnCalculateTitle') }}
      </el-button>
      <el-button
        size="small"
        @click="close">
        {{ $t('message.InterferenceCheckDlg.dlgBtnCloseTitle') }}
      </el-button>
    </div>
  </div>
</template>

<script>

import {interferenceCheckCommand} from "../../../Command/InterferenceCheck/InterferenceCheckCommand";
import DialogMixin from "../DialogMixin";

const calculateStatusTip = {
  noCalculate: 'message.InterferenceCheckDlg.dlgTipNotCalculate',
  calculating: 'message.InterferenceCheckDlg.dlgTipCalculation',
  NonInterfering: 'message.InterferenceCheckDlg.dlgTipNoInterference'
}
export default {
  mixins: [DialogMixin],
  name: "CmdDlgEntityAttribute",
  data() {
    return {
      params: {
        instances: [],
        distance:0.0,
        checkType:1,
        resultList:[],
        hideNonInterferingPart:false,

        queryListActiveMap: {
          instances: 1
        },
      },
      isCalculated:false,
      selResult:null,
      currentStatusTip: calculateStatusTip.noCalculate,
      selItem: null,
    }
  },
  mounted() {
    interferenceCheckCommand.init(400,300,270,() => {
      interferenceCheckCommand.handlePickElement((data) => {
        let instanceIds = [];
        this.params.instances.forEach(instanceData =>{
          instanceIds.push(instanceData.instanceId);
        })

        //对所有选取元素进行移除高亮，并对当前选取的实例进行高亮
        interferenceCheckCommand.clearAllHighLight();

        //筛选同id的不进行添加,对instance的id进行区分
        data.element.forEach(instanceSelect => {
          interferenceCheckCommand.getTopInstance(instanceSelect.instance,(topInstance) =>{
            if(topInstance.data.instance.id && !instanceIds.includes(topInstance.data.instance.id)){
              topInstance.data.instance.instanceId = topInstance.data.instance.id;
              this.$delete(topInstance.data.instance,'id');
              this.params.instances.push(topInstance.data.instance);
              instanceIds.push(topInstance.data.instance.instanceId);
            }

            interferenceCheckCommand.highLightInstances(instanceIds);
          })
        })

      });
    });
  },

  methods: {
    changePluginContainerHeight() {
      interferenceCheckCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight});
    },
    //移除选中项
    removeSelect(item) {
      interferenceCheckCommand.clearEntityOutline(item.instanceId);
    },

    //计算干涉结果
    calculate: function() {
      if (!this.isCalculated) {
        return;
      }
      //点击计算设置计算结果的内容为正在计算
      this.currentStatusTip = calculateStatusTip.calculating;

      interferenceCheckCommand.calculateStaticInterferenceCheck(this.params,(data) => {
        if (data?.length === 0) {
          this.currentStatusTip = calculateStatusTip.NonInterfering;
        }
        else
        {
          //Todo,返回结果处理
          this.params.resultList=data;
        }
      })
    },
    close(){
      interferenceCheckCommand.closeActiveCmd();
    },
    highlight(item) {
      // viewEffectManager.clearHighlights();
      // outlineHelper.clearHighlight();
      //
      // let reference = infoReference.getRef(item);
      // if (!reference) {
      //   return
      // }
      // let {feature, entity, element, instance} = reference;
      // // feature
      // if (feature) {
      //   let elements = elementManager.getElementsByFeature(feature);
      //   elements.forEach(element => viewEffectManager.addHighlightElement(element));
      //   scene.render();
      //   return
      // }
      //
      // // ass
      // if (instance) {
      //   if (element) {
      //     viewEffectManager.addHighlightElement(element, instance);
      //   } else {
      //     outlineHelper.onInstanceHighlighted(instance);
      //   }
      //   scene.render();
      //   return
      // }
      //
      // // part
      // if (entity) {
      //   if (entity.type === EntityType.SOLID || entity.type === EntityType.SHELL) {
      //     outlineHelper.onObjectHighlighted(entity.obj3d);
      //   } else if (entity.type === EntityType.SKETCH) {
      //     // 草图
      //     let sketchRegion = elementManager.getElement(item.id);
      //     if (sketchRegion) {
      //       viewEffectManager.addHighlightElement(sketchRegion);
      //     }
      //   }
      //   scene.render();
      //   return;
      // }
      //
      // if (!element?.isElement) return;
      //
      // // 如果是loop元素，高亮同loops内的其他元素
      // if (item?.isLoop && element?.entityRef?.loops) {
      //   element.entityRef.loops.forEach(list => {
      //     if (list.includes(element.id)) {
      //       list.forEach(eleId => {
      //         let loopEle = elementManager.getElement(eleId);
      //         viewEffectManager.addHighlightElement(loopEle);
      //       })
      //     }
      //   })
      //   scene.render();
      //   return;
      // }
      //
      // viewEffectManager.addHighlightElement(element);
      // scene.render();
    },
    removeHighlight(selectItem) {
      // viewEffectManager.clearHighlights();
      // outlineHelper.clearHighlight();
      // scene.render();
      interferenceCheckCommand.clearHighLightInstance(selectItem.instanceId);
    },
    selectResultItem(item = null) {
      this.selResult = item || this.selResult;
      this.params.resultList.forEach(result => result.selected = result.index === this.selResult?.index);

      let resultParam = {
        item: item,
        selResult: this.selResult,
        hideNonInterferingInstances: false,
      }
      interferenceCheckCommand.highlightStaticCheckResult(resultParam);
    },
    unfoldResultItem(item) {
      item.unfold = !item.unfold;
      this.selResult = item;
      this.selectResultItem();
    },
    parseGapInfo(group) {
      this.selectResultItem(this.params.resultList[0]);
    },
    //对结果中选中的零部件高亮显示
    selectInstance(item = null) {
      this.selItem = item;
      let resultParam = {
        item: item,
        selResult: this.selResult,
        hideNonInterferingInstances: false,
      }
      interferenceCheckCommand.highlightStaticCheckResult(resultParam);
    },
  },

  watch: {
    "params.instances": function (val) {
      if(this.params.instances.length >= 2)
      {
        this.isCalculated = true;
      }
      else
      {
        this.isCalculated = false;
      }
      let instanceIds = [];
      this.params.instances.forEach(instanceData =>{
        instanceIds.push(instanceData.instanceId);
      })

      //对所有选取元素进行移除高亮，并对当前选取的实例进行高亮
      interferenceCheckCommand.clearAllHighLight();
      interferenceCheckCommand.highLightInstances(instanceIds);
    },
    "params.hideNonInterferingPart": function (val) {
    }
  },

  computed: {

  }
}
</script>

<style scoped>
.wrap {
    font-size: 12px;
}
.query-description {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 3px;
}

.result-list {
    padding: 2px 10px;
    max-height: 180px;
    overflow-y: auto;
}

.result-item {
    touch-action: none;
    margin: 1px 0;
    padding: 2px 0 2px 4px;
    display: flex;
    align-items: center;
}

.result-item .angle-icon {
    font-weight: bold;
    padding: 0 2px;
}

.result-item-title {
    flex-grow: 1;
}

.ident {
    padding-left: 14px;
}

.selected-query-li {
    border-radius: 3px;
    background-color: var(--bg-color3);
}
</style>